<template>
    <div class="showDialog">
        <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" v-model="visible" title="" :show-close="false" align-center
            class="dialogAdd">
            <div class="dialog_content">
                <div class="dialog_header">
                    <div class="title">
                        <img src="../assets/images/rectangle07.png" alt="">
                        <span>修改个人信息</span>
                    </div>
                    <!-- <img class="close" src="../assets/images/close.png" @click="closeDialog" alt=""> -->
                </div>
                <div class="dialog_details">
                    <div class="details">
                        <el-form class="form" ref="ruleFormRef" label-width="105px" :model="formParams" label-position="right" :rules="rules">
                            <el-form-item label="手机号">
                                <span>{{ state.data.mobile }}</span>
                            </el-form-item>
                            <el-form-item label="真实姓名" prop="realName">
                                <el-input v-model.trim="formParams.realName" placeholder="真实姓名" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="所属部门">
                                <dptType_select :needAll="false" placeholder_text="所属部门" ref="selectComponent" @getDeviceTypeId="getDeviceTypeId" @getTreeList="getTreeList"></dptType_select>
                            </el-form-item>
                            <el-form-item label="*密码验证" prop="pwd">
                                <el-input v-model.trim="formParams.pwd" type="password"
                                    placeholder="请输入登陆密码进行验证" clearable></el-input>
                            </el-form-item>
                            <el-form-item>
                                <div class="btn">
                                    <el-button type="warning" @click="savePwd(ruleFormRef)">保 存</el-button>
                                    <el-button @click="closeDialog">取 消</el-button>
                                   
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>

        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { editInfoSelf,queryUserDetail } from "@/http/user";
import dptType_select from './dptType_select.vue'
import { storeToRefs } from 'pinia';
import { useMain,store } from "../store/index";
const useMainStore = useMain(store);//pinia
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    propInfo: {
        type: Object,
        default: null
    }
})

const state = reactive({
    data: {} as any,
})

let visible = ref(false);

const selectComponent = ref<any>(null);//获取下拉框组件

const formParams = reactive({
    realName: '', //真实姓名
	pwd: "", // 密码
	dptInfo: {} as any, // 部门
})

const ruleFormRef = ref<FormInstance>()

//校验当前密码
const validate_oldPwd =(rule: any, value: any, callback: any)=>{
    if (value === '') {
        callback(new Error('请输入当前密码'))
    } else {
        callback()
    }
}

const rules = reactive<FormRules>({
    pwd: [{ validator: validate_oldPwd, trigger: 'blur' }],
    realName: [
        { required: true, message: '请输入真实姓名', trigger: 'blur' }
    ],
})

interface Tree {
  // id: number
  value: string
  label: string
  children?: Tree[]
}

const treeList = reactive({
  tree: [] as Array<Tree>,//系统/类别/类型/设备树形结构(element 所需要的格式)
  treeAndAll: [] as Array<Tree>,//系统/类别/类型/设备树形结构(element 所需要的格式 加了一个全部选项)
  list: [] as any,//系统/类别/类型/设备列表
})

//获取搜索栏选择的系统/类别/类型/设备
const getDeviceTypeId = (val:string, data:object)=>{
  console.log(val, data);
  
  formParams.dptInfo = data; // 部门是对象、？？？？
}

const getTreeList = (val:any)=>{
  treeList.tree = val.tree;
  treeList.treeAndAll = val.treeAndAll;
  treeList.list = val.list;
  // console.log('treeList.list',treeList.list);
  
}

watch(() => props.dialogVisible, (newValue, oldValue) => {
    visible.value = newValue;
    if (newValue) {
        if(ruleFormRef.value){
            ruleFormRef.value.clearValidate();
        }
    }
    formParams.pwd = ''
    queryUserDetail(props.propInfo.id).then((res:any) => {
        console.log(res);
        if(res.result) {
            state.data = res.result
            formParams.realName = state.data.realName
            if (selectComponent.value) {
              selectComponent.value.assignValue(res.result.dptId);
              let obj = {} as any;
              obj[res.result.dptId] = res.result.dptName
              formParams.dptInfo = obj
            }
        }
        console.log('formParams', formParams);
        
    })
});

//emit(父组件中的自定义方法)
const emit = defineEmits(['closeDialog']);
//关闭弹窗
const closeDialog = () => {
    emit("closeDialog");
}

let { userInfo } = storeToRefs(useMainStore);
const savePwd = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            editInfoSelf(formParams).then(res => {
                ElMessage({
                    message: '操作成功!',
                    type: 'success',
                    offset: document.getElementsByTagName('body')[0].offsetHeight / 2 - 24
                })
                let userInfoData
                userInfoData = JSON.parse(JSON.stringify(userInfo.value))
                console.log('userInfoData',userInfoData);
                
                userInfoData.realName = formParams.realName
                console.log('userInfoData',userInfoData);
                
                useMainStore.updatedUserInfo(userInfoData);
                // userInfo.value.realName = formParams.realName
                emit("closeDialog");
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

</script>

<style scoped lang="scss">
.showDialog {
    :deep(.dialogAdd) {
        width: 520px;
        min-height: 300px;
        background: rgba(255, 255, 255, 1);
        border-radius: 2px;
        box-shadow: 0px 6px 16px -8px rgba(0, 0, 0, 0.08), 0px 9px 28px 0px rgba(0, 0, 0, 0.05), 0px 12px 48px 16px rgba(0, 0, 0, 0.03);

        .el-dialog__header {
            padding: 0;

        }

        .el-dialog__body {
            padding: 0;

            .dialog_content {
                .dialog_header {
                    padding: 0;
                    height: 59px;
                    padding: 8px 32px 4px 62px;
                    line-height: 52px;
                    font-size: 16px;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 1);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 1px dashed rgba(112, 105, 95, 1);

                    .title {
                        display: flex;
                        align-items: center;

                        img {
                            width: 4px;
                            height: 22px;
                            margin-right: 15px;
                        }

                    }

                    .close {
                        width: 25px;
                        height: 25px;
                        cursor: pointer;

                    }
                }

                .dialog_details {
                    padding: 25px 45px 0 48px;
                    font-size: 16px;
                    font-weight: 400;
                    letter-spacing: 0px;
                    line-height: 30px;
                    color: rgba(0, 0, 0, 1);

                    .details {
                        padding: 0 0 25px 7px;
                        align-items: center;
                        .el-input {
                            width: 316px;
                        }

                    }

                }

            }
        }


    }

}

.el-form {
    display: block;

    .el-form-item {
        margin-bottom: 15px;
        .el-input {
            width: 280px;
        }
    }

    .btn {
        width: 100%;
        text-align: right;
        padding-right: 50px;
    }
}
</style>
